<template>
  <div class="tab-content">
    <div class="tab-main-content">
      <el-form
        ref="form"
        :model="info"
        label-width="120px"
        size="small"
        class="qr-form"
      >
        <el-form-item label="二维码链接">
          <el-input
            :disabled="true"
            v-model="info.qrCodeUrl"
          ></el-input>
        </el-form-item>

      <div class="qr-action">
        <div class="qr-img">
          <!-- <img :src="info.qrCodeUrl" alt=""> -->
          <qrcode v-show="info.qrCodeUrl" :value="info.qrCodeUrl" tag="img"></qrcode>
        </div>
        <div class="qr-actions">
          <!-- <el-button
            v-clipboard:copy="info.qrCodeUrl"
            v-clipboard:success="onCopy"
            plain
          >复制链接</el-button> -->
          <el-button
            class="has-tip"
            v-clipboard:copy="info.qrCodeUrl"
            v-clipboard:success="onCopy"
            plain
          >复制链接
            <span class="more-tip" v-show="showCopyed">Copied !</span>
          </el-button>
          <el-button type="primary" v-if="info.qrCodeUrl" @click="downloadQR(info.qrCodeUrl)">下载二维码</el-button>
        </div>
      </div>

      <el-form-item
        label="停车场图片"
        prop=""
      >
        <el-upload
          class="upload-demo"
          :class="{'is-uploaded': logoList.length > 0}"
          action=""
          :on-remove="handleChange"
          :on-change="handleChange"
          :before-upload="beforeAvatarUpload"
          :limit="1"
          accept="image/gif,image/jpeg,image/jpg,image/png"
          :file-list="logoList"
          list-type="picture-card"
          :auto-upload="false"
        >
          <el-button
            size="small"
            type="primary"
          >上传图片</el-button>
          <div
            slot="tip"
            class="el-upload__tip"
          >* LOGO高度不超过150px，宽度不超过200px，建议上传png格式的文件。</div>
        </el-upload>
      </el-form-item>

      </el-form>
    </div>
    <div class="qr-tips">
      <div class="title">车场管理方二维码-使用场景</div>
      <div class="tips-bd">
        多车场公用，支持车场管理费账号下所有车场在场车辆的查费缴费。
      </div>
    </div>
  </div>
</template>


<script>
// import qrcode from '@/components/QRCode/Index.vue'
import common from '@/mixins/common.js'
export default {
  mixins: [common],
  props: {
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  },

  data() {
    return {
      showCopyed: false,
      logoList: [],
      parkInfo: this.info
    };
  },

  mounted () {
    if (this.info && this.info.logoUrl) {
      this.parkInfo = this.info
      this.parkInfo.logoBase64 = null
      this.logoList.push({url: this.info.logoUrl})
    }
  },

  methods: {
    onCopy () {
      this.showCopyed = true
      setTimeout(function (){
        this.showCopyed = false
      }.bind(this), 2000)
    },

    uploadOperatorLogo () {
      let self = this

      let params = {
        operatorId: this.info.operatorId,
        logoBase64: this.parkInfo.logoBase64
      }
      API.fetchPost('/operatorPark/uploadOperatorLogo', params)
        .then(data => {
          // console.log(data)
          this.showToast('上传成功！', 1, 1500)
        }, err => {
          console.log(err)
          this.showToast('上传失败！', 2, 1500)
        })
    },
    // valueAdded/singleDownLoad
    downloadQR (url) {
      let href = '/mgr/valueAdded/singleDownLoad?url=' + url
      window.location.href = href

      // const link = document.createElement('a');
      // link.setAttribute('href', href);
      // link.setAttribute('download', '');
      // link.style.visibility = 'hidden';
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
    },

    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.logoList.push(file)
        this.getBase64Url(file)
      } else {
        this.logoList = []
        this.parkInfo.logoBase64 = null
      }
    },

    getBase64Url (file) {
      let self = this
      if (file.raw) {
        let reader = new FileReader()
        reader.readAsDataURL(file.raw)
        reader.onload = function (e) {
          // resolve(this.result)
          let _res = this.result
          self.parkInfo.logoBase64 = _res.substr(_res.indexOf('base64,') + 7)

          self.uploadOperatorLogo()
        }
      }
    },

    beforeAvatarUpload(file) {
      return false;
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    }
  },

  watch: {
    info (Val) {
      if (Val && Val.logoUrl) {
        this.parkInfo = Val
        this.parkInfo.logoBase64 = null
        this.logoList.push({url: Val.logoUrl})
      }
    }
  }
};
</script>

<style lang='less' scoped>
@import "./index.less";
</style>

<style lang="less">
.tab-content {
  .upload-demo{
    &:not(.is-uploaded) {
      .el-upload {
        height: 40px;
        line-height: 40px;
        text-align: left;
        border: 0;
      }
    }
    &.is-uploaded {
      .el-upload {
        display: none;
      }
    }
  }
}
</style>
